<template>
  <div>
    <Col span="8" style="padding-left: 5px;padding-right: 5px">
      <Select placeholder="省或直辖市" ref="provinceRef" :disabled="!editable" v-model="areaVo.province" @on-change="provinceChangeHandle">
        <no-data-text :area-data="provinces"></no-data-text>
        <Option v-for="(item, index) in provinces" :key="index" :label="item.name"  :value="item.id"></Option>
      </Select>
    </Col>
    <Col span="8" style="padding-left: 5px;padding-right: 5px">
      <Select placeholder="市" v-model="areaVo.city" :disabled="!editable" @on-change="cityChangeHandle">
        <no-data-text :area-data="citys"></no-data-text>
        <Option v-for="(item, index) in citys" :key="index" :value="item.id">{{item.name}}</Option>
      </Select>
    </Col>
    <Col span="8" style="padding-left: 5px;padding-right: 5px;" v-if="level !== 2">
      <Select placeholder="区县" v-model="areaVo.county" :disabled="!editable" @on-change="countyChangeHandle">
        <no-data-text :area-data="countys"></no-data-text>
        <Option v-for="(item, index) in countys" :key="index" :value="item.id">{{item.name}}</Option>
      </Select>
    </Col>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import noDataText from "./noDataText.vue";
  import {SERVICE_URLS} from "../../libs/service.url";

  export default {
    components: {
      noDataText
    },
    props: {
      value: {
        default: '',
      },
      level : {
        type : Number,
        default : 3
      },
      editable : {
        type : Boolean,
        default : true
      },
    },
    data() {
      return {
        provinces : [],
        citys : [],
        countys : [],
        areaVo : {
          province : '',
          city : '',
          county : ''
        },
        _val : this.value
      }
    },
    created() {
      if (this.value) {
        this.getSource('','province').then(res => {
          this.provinces = [...res];
          this.areaVo.province = this.value.province;
        });
        this.getSource(this.value.province,'').then(res => {
          this.citys = [...res];
          this.areaVo.city = this.value.city;
        });
        this.getSource(this.value.city,'').then(res => {
          this.countys = [...res];
          this.areaVo.county = this.value.county;
        });
      } else {
        this.getProvince();
      }
    },
    mounted(){

    },
    watch: {
      value(val) {
        this._val = val;
      }
    },
    methods: {
      getSource(pid,level) {
        const self = this;
        return new Promise(function (resolve, reject) {
          Vue.submit(self, {
            url: SERVICE_URLS.common.area,
            params: {
              parentId: pid,
              level: level
            },
            callback: (data) => {
              resolve(data);
            }
          })
        })
      },
      async getProvince () {
        this.provinces = [];
        let ret = await this.getSource('','province');
        this.provinces = [...ret];
      },
      async provinceChangeHandle (pid) {
        this.areaVo.city = '';
        if (!pid) {
          return;
        }
        let ret = await this.getSource(pid,'');
        this.citys = [...ret];
        this.bindVal();
      },
      async cityChangeHandle (pid) {
        this.areaVo.county = '';
        if (!pid) {
          return;
        }
        let ret = await this.getSource(pid,'');
        this.countys = [...ret];
        this.bindVal();
      },
      countyChangeHandle () {
        this.bindVal();
      },
      bindVal () {
        this._val = this.areaVo;
        this.$emit('input', this._val);
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
